<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换</title>
		<style type="text/css">
			.box{
				position:absolute;
				top:50%;
				left:50%;
				/* transform:translate(-50%,-50%); */
				width: 300px;
				height: 200px;
				background-color: hotpink;
				transition:all 2s linear;
				translate-origin:center center;
			}
			.box:hover{
				/* transform:translate(100px,100px); */		/* transformx()---x轴;transformy()---y轴 */
				background-color: red;
				transform:scale(2);
				/* transform:skew(45deg); */
				/* transform:rotate(-45deg); */   /* totatey平面 */
			}
		</style>
	</head>
	<body>
		<!-- 
		转换：transform
		1.位移translate()
		2.缩放scale()
		3.倾斜skew( _deg)
		4.旋转rotate(_deg):正数顺时针旋转、负数逆时针旋转
		 -->
		<div class="box"></div>
	</body>
</html>